import axios from 'axios';
import React, { Component } from 'react'
import './index.css'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
import 'swiper/css';
import withRightNav from '../../components/hoc/withRightNav';
class Item extends Component {
    constructor() {
        super();
        this.state = {
            swiperList: [],
            detailList: [],
            itemObj: {
            },
            realIndex: 1
        }
    }
    componentDidMount() {
        axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commodityDetail', { "ptKey": this.props.match.params.id, "memberKey": "", "isWholeSale": 0, "channelId": null }).then(
            (res) => {
                console.log(res);
                this.setState({
                    itemObj: res.data.data.templateInfo,
                    swiperList: res.data.data.templateInfo.bannerImages.split(","),
                    detailList: res.data.data.templateInfo.detailImages.split(",")
                })
            }
        )
    }
    render() {
        let { swiperList, detailList, realIndex, itemObj } = this.state;
        return (
            <div className='item'>
                <Swiper className='itemswiper'
                    modules={[Autoplay]}
                    pagination={{ clickable: true }}
                    onSlideChange={(swiper) => {
                        this.setState({
                            realIndex: swiper.realIndex + 1
                        })
                    }}
                    // onSwiper={(swiper) => this.setState({ myswiper: swiper })}
                    autoplay={{ delay: 2000, disableOnInteraction: false }}
                    loop={true}
                >
                    {
                        swiperList.map((item, index) =>
                            <SwiperSlide key={index}><img src={item} alt=""></img></SwiperSlide>)
                    }
                    <span className='swiper-auto'>{realIndex}/{swiperList.length}</span>
                </Swiper>
                <div className='ceo-buy'>
                    <span className='ceoText-l'>开通旺旺会员，购买立省{(itemObj.retailPrice - itemObj.supplyPrice).toFixed(1)}元</span>
                    <span className='ceoText-r'>立即开通</span>
                </div>
                <div className='price-wrap'>
                    <div className='detail__retailPrice'>
                        <span className='moneyText'>￥</span>
                        <span className='retailPrice_val'>{itemObj.retailPrice}</span>
                        <span className='priceText'>/{itemObj.soldUnit}</span>
                    </div>
                    <div className='details_ceoBuy'>￥{itemObj.supplyPrice}</div>
                    <div className='ceoTip'></div>
                </div>
                <div className='sell-num'>已售：{itemObj.sold}{itemObj.soldUnit}</div>
                <div className='name-wrap'>
                    <div className='item-name'>{itemObj.name}</div>
                    <div className='collect'>
                        <div className='share-icon'></div>
                        <div className='collectionText'>收藏</div>
                    </div>
                </div>
                <div className='detailDescription'>{itemObj.description}</div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='service-box'>
                    <span className='service__lab'>已选</span>
                    <div className='checked_lab'>
                        <span>{itemObj.displayName}</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div className='service-box'>
                    <span className='service__lab'>促销</span>
                    <div className='checked_lab'>
                        <div style={{ backgroundImage: 'url("https://hotkidceo-1251330842.file.myqcloud.com/static/home/gift.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '36px', height: '14px' }}></div>
                        <span>本商品当前正在参与{itemObj.startSaleNum}项满赠活动</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='service-box'>
                    <span className='service__lab'>服务</span>
                    <div className='checked_lab'>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>企业文化</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>品质保证</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>快速发货</span>
                        <div style={{ backgroundImage: 'url("https://srv.hotkidceo.com/store/static/detail/service.png")', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat', width: '12px', height: '12px' }}></div>
                        <span className='service-item'>售后无忧</span>
                        <div className='imgArrow'></div>
                    </div>
                </div>
                <div style={{ height: '10px', backgroundColor: 'rgb(247, 247, 247)', marginTop: '10px' }}></div>
                <div className='p-md'>
                    <div className='mb-md'>
                        <div className='title__lab'>商品详情</div>
                    </div>
                    {
                        detailList.map((item, index) => <img className='detail-img' src={item} key={index} alt=""></img>)
                    }
                </div>
                <div className='footer'>
                    <div className='btn-contact'>
                        <div className='icon-service'></div>
                        <div className='text-service'>客服</div>
                    </div>
                    <div className='btn-cart'>
                        <div className='icon-cart'></div>
                        <div className='text-cart'>购物车</div>
                    </div>
                    <div className='btn-addCart'>
                        <div className='button-image'></div>
                        <div className='button-title'>加入购物车</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default withRightNav(Item);